<script>
import { getExecutionList, getExecutionResults } from "../api/executionApi";
import { ElMessage } from "element-plus";

export default {
  name: "ExecutionPage",
  data() {
    return {
      exections: [],

      input: {
        executionUuid: this.$route.query.executionUuid || "",
        jmxUuid: "",
      },

      select: {
        status: "",
      },

      dialog: {
        executionResults: {
          visible: false,
          title: "执行报告",
          results: []
        },
      }
    };
  },

  async mounted() {
    this.exections = (await getExecutionList({
      executionUuid: this.input.executionUuid,
      jmxUuid: this.input.jmxUuid,
      status: this.select.status,
    })).data.map(execution => {
      execution.status = execution.status === 0 ? "待执行" : execution.status === 1 ? "执行中" : execution.status === 2 ? "已完成" : "已终止";
      return execution;
    });
  },

  methods: {
    async handleQueryExecutionList() {
      this.exections = (await getExecutionList({
        executionUuid: this.input.executionUuid,
        jmxUuid: this.input.jmxUuid,
        status: this.select.status,
      })).data.map(execution => {
        execution.status = execution.status === 0 ? "待执行" : execution.status === 1 ? "执行中" : execution.status === 2 ? "已完成" : "已终止";
        return execution;
      });
    },

    async handleViewExecutionResults(executionUuid) {
      this.dialog.executionResults.results = (await getExecutionResults({ executionUuid })).data;
      this.dialog.executionResults.visible = true;
    },

    async handleViewSlowApi(executionUuid) {
      console.log(executionUuid);
      ElMessage({
        message: "尚未实现",
        type: "info",
      })
    }
  }

}
</script>

<template>
  <div class="execution-page">
    <div class="toolbar">
      <el-input v-model="input.executionUuid" clearable placeholder="请输入execution uuid" class="input-item"></el-input>
      <el-input v-model="input.jmxUuid" clearable placeholder="请输入jmx uuid" class="input-item"></el-input>
      <el-select v-model="select.status" clearable placeholder="请选择状态" class="select-item">
        <el-option label="全部" value=""></el-option>
        <el-option label="待执行" value="0"></el-option>
        <el-option label="执行中" value="1"></el-option>
        <el-option label="已完成" value="2"></el-option>
        <el-option label="已终止" value="3"></el-option>
      </el-select>
      <el-button @click="handleQueryExecutionList" class="toolbar-button">查询</el-button>
    </div>
    <div class="table-container">
      <el-table :data="exections" class="execution-table" height="100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="executionUuid" label="Execution UUID" width="300"></el-table-column>
        <el-table-column prop="jmxUuid" label="JMX UUID" width="300"></el-table-column>
        <el-table-column prop="machineName" label="远程机名称" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="150"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="200"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" @click="handleViewExecutionResults(row.executionUuid)" class="action-button">查看报告</el-button>
            <el-button type="primary" @click="handleViewSlowApi(row.executionUuid)" class="action-button">查看慢接口</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog v-model="dialog.executionResults.visible" :title="dialog.executionResults.title" width="80%" class="custom-dialog">
        <el-table :data="dialog.executionResults.results" class="results-table" height="400">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="roundNumber" label="轮次" width="60"></el-table-column>
          <el-table-column prop="testPlanName" label="测试计划" width="120"></el-table-column>
          <el-table-column prop="threads" label="线程数" width="70"></el-table-column>
          <el-table-column prop="samples" label="样本数" width="70"></el-table-column>
          <el-table-column prop="averageResponseTime" label="平均时间(ms)" width="120"></el-table-column>
          <el-table-column prop="ninetyPercentLine" label="90%时间(ms)" width="120"></el-table-column>
          <el-table-column prop="minResponseTime" label="最小时间(ms)" width="120"></el-table-column>
          <el-table-column prop="maxResponseTime" label="最大时间(ms)" width="120"></el-table-column>
          <el-table-column prop="actualThroughput" label="吞吐量" width="100"></el-table-column>
          <el-table-column prop="errorRate" label="错误率(%)" width="100"></el-table-column>
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialog.executionResults.visible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
.execution-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.input-item {
  width: 250px;
}

.select-item {
  width: 180px;
}

.toolbar-button {
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
}

.toolbar-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: white;
}

.table-container {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.execution-table {
  border: none;
  flex: 1;
}

.execution-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.action-button {
  padding: 8px 16px;
  margin-right: 10px;
}

.results-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.results-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.custom-dialog :deep(.el-dialog__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.custom-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 20px;
}
</style>